<template>
  <div class="announcement">
    <h2>校园通知</h2>
    <div class="announcement-container">
      <div v-for="(announcement, index) in campusAnnouncements" :key="index" class="announcement-item">

          <div class="announcement-content">
              <div class="announcement-time">
                  <div class="time-day">{{ getDayFromDate(announcement.createTime) }}</div>
                  <div class="time-separator"></div> <!-- Separator line -->
                  <div class="time-month-year">{{getMonthYearFromDate(announcement.createTime)}}</div>
              </div>
              <router-link class="announcement-title"  :to="{path: 'notifications', query: {id:announcement.id}}">
                  {{ truncateContent(announcement.title) }}
              </router-link>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/util/request.js";
export default {
    data() {
        return {
            campusAnnouncements: []
        };
    },
    created() {
        this.getData()
    },
  methods: {
    getDayFromDate(dateString) {
      return dateString.split('-')[2].split(' ')[0];
    },
    getMonthYearFromDate(dateString) {
      return dateString.split('-')[0] + '年' + dateString.split('-')[1].split('-')[0] + '月';
    },
      // 获取数据
      getData(){
          request.get("/related_notice/page?pageNum=1&pageSize=10").then(res=>{
              if (res.data.code === '200') {
                  for (let key in res.data.data) {
                      if (key === "records") {
                          this.campusAnnouncements.push(...res.data.data[key]);
                      }
                  }
              } else {
                  this.$message({
                      type: 'error',
                      message: '服务端错误',
                      center: true,
                  })
              }
          })
      },
      truncateTitle(title) {
          if (title.length > 8) {
              return title.slice(0, 8) + '...';
          }
          return title;
      },
      truncateContent(content) {
          if (!content) return ''; // 如果描述为空，返回空字符串
          // 清除 HTML 标签
          const withoutTags = content.replace(/(<([^>]+)>)/gi, "");
          // 截取前20个字符
          if (withoutTags.length >40) {
              return withoutTags.slice(0, 40) + '...';
          }
          return withoutTags;
      },
  },

};
</script>
<style scoped>
.announcement {
  text-align: center;
}

.announcement-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-height: 1100px; /* 设置最大高度 */
  overflow-y: auto; /* 启用垂直滚动条 */
}

.announcement-container::-webkit-scrollbar {
  width: 15px; /* 设置滚动条宽度 */
}

.announcement-container::-webkit-scrollbar-track {
  background: transparent; /* 设置滚动条轨道背景色 */
}

.announcement-container::-webkit-scrollbar-thumb {
  background-color: rgba(147, 242, 243, 0.71); /* 设置滚动条thumb颜色 */
  border-radius: 7px; /* 设置滚动条thumb的圆角 */
  border: 1px solid #aaa; /* 设置滚动条thumb的边框 */
}
.announcement-item {
  margin: 10px;
  width: 100%; /* 根据需要调整宽度 */
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.announcement-content {
  display: flex;
  flex-direction: row;
  background-color: transparent; /* 透明背景 */
}

.announcement-time {
  padding: 20px;
  color: black; /* 黑色字体 */
  background-color: rgba(147, 242, 243, 0.4); /* 灰色透明背景 */
  border-radius: 10px;
  display: flex; /* 启用弹性布局 */
  flex-direction: column; /* 垂直排列子元素 */
  justify-content: center; /* 子元素居中 */
}

.time-day {
  font-size: 2rem; /* 大一点的字体 */
}

.time-separator {
  height: 3px; /* 增加分隔线的高度 */
  background-color: rgb(213, 231, 229); /* 增加对比度 */
  margin: 10px 0; /* 根据需要调整边距 */
}

.time-month-year {
  font-size: 1rem; /* 年月份的字体大小 */
  white-space: nowrap; /* 不换行 */
}

.announcement-title {
  padding: 10px;
  font-size: 1.3rem;
  color: black; /* 黑色字体 */
  flex-grow: 1;
    width: 100%;
  text-align: center; /* 文字水平居中 */
  align-self: center; /* 文字垂直居中 */
}

.announcement-title a {
  color: inherit;
  text-decoration: none;
  font-weight: bold;
}

.announcement-title a:hover {
  text-decoration: underline;
}

</style>
